<template>
  <div class="tactic-box" v-if="tactic">
    <div
      class="practice"
      v-if="practice"
      :class="{ active: isPractice }"
      @click.stop="practiceTactic"
    >
      {{ isPractice ? "已演练" : "未演练" }}
    </div>
    <div class="name">
      <div class="name-box">
        <h3>{{ tactic.name }}</h3>
        <div class="score" :type="tactic.qualityName">
          {{ tactic.qualityName }}
        </div>
      </div>
      <div class="type">
        <div class="item">{{ tactic.typeName }}</div>
        <div class="item" v-if="tactic.effect_type">
          {{ tactic.effectTypeName }}
        </div>
      </div>
    </div>
    <div class="info">
      <div class="odds">发动概率：{{ tactic.probability }}%</div>
      <div class="target">目标：{{ tactic.target }}</div>
    </div>
    <div class="desc">
      <div v-if="!max" v-html="showText(tactic.info)"></div>
      <div v-else v-html="showText(tactic.full_grade_effect)"></div>
    </div>
    <div class="heroe" v-if="heroe && tactic.sortable_heroes.length">
      <div class="tit">适用武将：</div>
      <div class="list">
        <div
          class="item"
          @click="jumpPage('/heroe/' + item)"
          v-for="(item, i) in tactic.sortable_heroes"
          :key="i"
        >
          {{ getHeroeName(item) }}
        </div>
      </div>
    </div>

    <div class="heroe" v-if="heroe && tactic.inherit_tactic_heroes.length">
      <div class="tit">传承出处：</div>
      <div class="list">
        <div
          class="item"
          @click="jumpPage('/heroe/' + item)"
          v-for="(item, i) in tactic.inherit_tactic_heroes"
          :key="i"
        >
          {{ getHeroeName(item) }}
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="icon">
        <!-- tactic.sortable_soldiers -->
        <img
          v-if="tactic.sortable_soldiers.indexOf('cavalry') != -1"
          src="../../assets/qi.svg"
          alt=""
        />
        <img
          v-if="tactic.sortable_soldiers.indexOf('mauler') != -1"
          src="../../assets/dun.svg"
          alt=""
        />
        <img
          v-if="tactic.sortable_soldiers.indexOf('archer') != -1"
          src="../../assets/gong.svg"
          alt=""
        />
        <img
          v-if="tactic.sortable_soldiers.indexOf('pikeman') != -1"
          src="../../assets/qiang.svg"
          alt=""
        />
        <img
          v-if="tactic.sortable_soldiers.indexOf('weapon') != -1"
          src="../../assets/qixie.svg"
          alt=""
        />
      </div>
      <a @click="max = !max"> {{ max ? "一级效果查看" : "满级效果查看" }}</a>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TacticBox",
  props: {
    data: Object,
    tacticId: Number,
    heroe: {
      type: Boolean,
      default: false,
    },
    practice: {
      type: Boolean,
      default: false,
    },
    // 是否在弹出层打开
    popup: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState("data", ["userTactics"]),
    isPractice() {
      let practice = this.userTactics.indexOf(this.tactic.id) !== -1;
      return practice;
    },
  },
  data() {
    return {
      tactic: null,
      max: false,
    };
  },
  watch: {
    tacticId() {
      if (this.data) return (this.tactic = this.data);
      this.$store.dispatch("data/getTactic", this.tacticId).then((res) => {
        this.tactic = res;
      });
    },
  },
  async created() {
    if (this.data) this.tactic = this.data;
    else
      this.tactic = await this.$store.dispatch("data/getTactic", this.tacticId);
  },
  methods: {
    showText(text) {
      var htmlobj = text.replace(/(\d+)/gim, "<span>$&</span>");
      htmlobj = htmlobj.replace(/\./g, "<span>.</span>");
      htmlobj = htmlobj.replace(/%/g, "<span>%</span>");
      return htmlobj;
    },
    getHeroeName(id) {
      let heroesList = window.stateData.heroesList;
      let name = "";
      heroesList.some((item) => {
        if (item.id === id) name = item.name;
        return !!name;
      });
      return name;
    },
    practiceTactic() {
      this.$store.dispatch("data/setUserTactics", this.tactic.id);
    },
    jumpPage(path) {
      if (this.popup) {
        this.$emit("jump", path);
      } else {
        this.$router.push(path);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tactic-box {
  background: #f2f2f2;
  border-radius: 5px;
  padding: 0.11rem 0.13rem 0.16rem;
  .practice {
    float: right;
    width: 0.28rem;
    height: 0.48rem;
    background: #ffffff;
    border-radius: 0.04rem;
    border: 1px solid #ebebeb;
    font-size: 0.12rem;
    color: #8c8c8c;
    line-height: 0.14rem;
    box-sizing: border-box;
    padding: 0 0.05rem 0 0.07rem;
    display: flex;
    align-items: center;
    &.active {
      background: #f18849;
      border: 1px solid #f18849;
      color: #fff;
    }
  }
  .name {
    display: flex;
    align-items: center;
    .name-box {
      display: flex;
      align-items: center;
      background: #f2f2f2;
      border-radius: 0.04rem;
      padding: 0.04rem 0.05rem;
      h3 {
        margin: 0;
        font-size: 0.14rem;
        font-weight: 400;
        color: #333333;
      }
      .score {
        margin-left: 0.03rem;
        width: 0.16rem;
        height: 0.16rem;
        background: #f6a16e;
        border-radius: 0.1rem;
        color: #fff;
        text-align: center;
        line-height: 0.18rem;
        font-size: 0.12rem;
        &[type="S"] {
          background: #f6a16e;
        }
        &[type="A"] {
          background: #c483c0;
        }
        &[type="B"] {
          background: #81a0cf;
        }
        &[type="C"] {
          background: #96bfa3;
        }
      }
    }
    .type {
      display: flex;
      margin-left: 0.05rem;
      .item {
        font-size: 0.12rem;
        min-width: 0.48rem;
        height: 0.2rem;
        padding: 0 0.05rem;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 0.1rem;
        margin-right: 0.04rem;
        text-align: center;
        line-height: 0.22rem;
      }
    }
  }
  .info {
    margin-top: 0.08rem;
    font-size: 0.12rem;
    color: #8c8c8c;
    display: flex;
    align-items: center;
    .odds {
      margin-right: 0.21rem;
    }
  }
  .desc {
    margin: 0.1rem 0;
    font-size: 0.14rem;
    color: #333333;
    line-height: 0.24rem;
    text-align: justify;
    ::v-deep {
      span {
        color: #f18849;
      }
    }
  }
  .heroe {
    margin-bottom: 0.1rem;
    font-size: 0.14rem;
    color: #8c8c8c;
    display: flex;
    .tit {
      padding-top: 0.01rem;
    }
    .list {
      flex: 1;
      width: 0;
      .item {
        display: inline-block;
        color: #f18c50;
        margin-right: 0.1rem;
      }
    }
  }
  .bottom {
    margin-top: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      margin-left: -0.03rem;
      height: 0.2rem;
      background: #63666f;
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      padding: 0.03rem 0.15rem;
      img {
        width: 0.12rem;
        height: 0.12rem;
        margin: 0 0.03rem;
      }
    }
    a {
      font-size: 0.14rem;
      color: #507cae;
    }
  }
}
</style>
